<template>
  <div class="complaint-submit">
    <div class="sub-page-header">
      <el-tooltip content="点击返回企业名录" placement="left">
        <div class="title" @click="goBack">
          <el-button icon="el-icon-arrow-left" type="text"></el-button>
          {{ id ? '修改' : '新增' }}企业信息
        </div>
      </el-tooltip>
    </div>
    <el-scrollbar class="apply-box submit-fixed">
      <div class="content">
        <div class="form">
          <el-form label-suffix="：" :model="detail" :rules="rules" label-width="110px" ref="dataForm">
            <div class="section-title syht18">基本信息</div>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item prop="enterpriseName" label="企业名称">
                  <el-input
                    placeholder="请输入"
                    v-model="detail.enterpriseName"
                    maxlength="120"
                    show-word-limit
                    clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="legalPerson" label="法定代表人">
                  <el-input
                    placeholder="请输入"
                    v-model="detail.legalPerson"
                    maxlength="120"
                    show-word-limit
                    clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="企业规模" prop="enterpriseType">
                  <el-select v-model="detail.enterpriseType" style="width: 100%" clearable>
                    <el-option
                      v-for="item in enterpriseTypes"
                      :key="item.id"
                      :value="String(item.id)"
                      :label="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="registerNumber" label="注册号">
                  <el-input
                    v-model="detail.registerNumber"
                    placeholder="请输入（注册号/统一社会信用代码）"
                    maxlength="100"
                    show-word-limit></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item prop="establishDate" label="成立日期">
                  <el-date-picker
                    class="full_width"
                    v-model="detail.establishDate"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="请选择"
                    :editable="false"
                    :clearable="false"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="registerCapital" label="注册资本">
                  <el-input v-model="detail.registerCapital" @input="limitDecimal" placeholder="请输入" type="number">
                    <span class="append-text" slot="append">万元</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item prop="registerOrgan" label="登记机关">
                  <el-input
                    placeholder="请输入"
                    v-model="detail.registerOrgan"
                    maxlength="120"
                    show-word-limit></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="industry" label="所属行业">
                  <el-select class="full_width" v-model="detail.industry" clearable filterable placeholder="请选择">
                    <el-option
                      v-for="item in industryList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item prop="employee" label="员工人数">
                  <el-input
                    v-model="detail.employee"
                    placeholder="请输入"
                    type="number"
                    oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=''} if(value>999999999){value=999999999}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="registerStatus" label="登记状态">
                  <el-select
                    v-model="detail.registerStatus"
                    placeholder="请选择"
                    clearable
                    filterable
                    popper-class="el-select-wrap"
                    style="width: 100%">
                    <el-option
                      v-for="item in statusList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      @click.native="onOrgChange(item)"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item prop="enterpriseAddress" label="企业地址">
              <el-input
                placeholder="请输入"
                v-model="detail.enterpriseAddress"
                maxlength="50"
                show-word-limit
                type="textarea"
                rows="2"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="btns-view">
          <div class="btn-box">
            <el-button class="btn-item" type="primary" @click="submitData">提交</el-button>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { getEnterpriseDetail, saveEnterprise } from '@api/modules/enterprise.js'

// import { listProvince } from '@api/modules/common'

import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'enterpriseCreate',
  components: {},
  props: {},
  data() {
    return {
      id: '',
      detail: {
        id: '',
        enterpriseName: '',
        registerNumber: '',
        enterpriseType: '',
        legalPerson: '',
        establishDate: '',
        registerCapital: '',
        registerOrgan: '',
        industry: '',
        employee: null,
        registerStatus: '',
        enterpriseAddress: '',
      },
      statusList: [],
      enterpriseTypes: [],
      industryList: [],

      rules: {
        enterpriseName: [
          {
            required: true,
            message: '请输入企业名称',
            trigger: 'blur',
          },
        ],
        enterpriseType: [
          {
            required: true,
            message: '请选择企业规模',
            trigger: 'change',
          },
        ],
        registerNumber: [
          {
            required: true,
            message: '请输入注册号',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  computed: {
    ...mapGetters('publicCode', ['getCode']),
  },
  created() {
    const { id } = this.$route.params
    this.id = id

    this.getEnterpriseDetail()
  },
  mounted() {},
  methods: {
    ...mapActions('publicCode', ['getListDictData']),
    async getAllRules() {
      // 登记状态
      await this.getListDictData({ param: 'REGISTRATION_STATUS' })
      // 企业类型
      await this.getListDictData({ param: 'ENTERPRISE_TYPE' })

      // 所属行业
      await this.getListDictData({ param: 'INDUSTRY_CLASSIFICATION' })

      const { REGISTRATION_STATUS, ENTERPRISE_TYPE, INDUSTRY_CLASSIFICATION } = this.getCode
      this.statusList = [...REGISTRATION_STATUS]
      this.enterpriseTypes = [...ENTERPRISE_TYPE]
      this.industryList = [...INDUSTRY_CLASSIFICATION]
    },
    async getEnterpriseDetail() {
      await this.getAllRules()
      if (this.id) {
        getEnterpriseDetail({ id: this.id }).then(res => {
          if (res.code === 0) {
            this.detail = res.data
          }
        })
      }
    },
    submitData() {
      console.log(this.detail)
      this.$refs.dataForm.validate(valid => {
        if (this.isPreview) {
          return false
        }
        if (valid) {
          const params = { ...this.detail }

          saveEnterprise(params).then(res => {
            if (res.code === 0) {
              this.$message.success(res.message || '提交成功')
              this.$emit('submit')
              // this.resetForm()
              this.goBack()
            }
          })
        }
      })
    },
    // 重置表单
    resetForm() {
      if (this.$refs.dataForm) {
        this.$refs.dataForm.resetFields()
      }
    },
    limitDecimal(value) {
      // 使用正则表达式限制为6位小数
      const regex = /^(\d+)?(\.\d{0,6})?$/
      // 如果输入值不符合正则表达式，则将其设置为上一个合法的值
      if (!regex.test(value)) {
        this.detail.registerCapital = this.detail.registerCapital.substring(0, value.length - 1)
      }
    },

    goBack() {
      this.$router.back(-1)
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onWindowResize)
  },
}
</script>

<style lang="scss" scoped>
.complaint-submit {
  height: 100%;
  @include flex-y;
  position: relative;
  background: #f5f6fa;
  padding: 20px;
  .el-scrollbar {
    @include flex-1;
  }
  ::v-deep .el-select-group {
    display: flex;
    flex-wrap: wrap;
  }

  .apply-box {
    background-color: #fff;
    .content {
      padding: 20px 30px;
    }
    .section-title {
      padding: 10px;
      background: #f0f4f9;
      margin-bottom: 15px;
    }
    .append-text {
      border: none !important; /* 去掉背景边框 */
      background-color: transparent !important; /* 确保没有背景颜色 */
      padding: 0; /* 根据需要调整 */
    }
  }

  .btns-view {
    // @include flex-x(center, center);
    text-align: center;
    border-top: 1px solid $-border-color-base;
    margin-top: 10px;
    padding: 20px;
    background-color: #fff;
    .other-btn-box {
      margin-top: 10px;
      text-align: center;
    }
    .btn-item {
      width: 120px;
      height: 40px;
      font-size: 16px;
    }
    .empty {
      background-color: transparent;
      color: #4a79ba;
    }
  }
  .submit-fixed {
    padding-bottom: 100px;
    .btns-view {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }

  @media screen and(max-width:800px) {
    .apply-box {
      .content {
        padding: 20px;
      }
    }
    .msg-container {
      .section-title {
        padding: 20px 50px;
        font-size: 36px;
        .icon-img-ts,
        .icon-img-person {
          display: inline-block;
          height: 36px;
          vertical-align: middle;
          margin-right: 10px;
          margin-top: -5px;
        }
      }
    }
    .el-input__count {
      font-size: 24px;
    }
  }
}
</style>
